<template>
	<view class="container">
		<cu-custom style="color: #fff; line-height: 60px;" bgColor="bg-blue">
			<block slot="content">我的项目</block>
			<!-- <view slot="right"  @tap="goShaixuan"><image src="../../static/icon/shaixuanwhite.png" style="width: 15px;height: 17px;"></image> </view> -->
		</cu-custom>
		<view class="projectHead">
			<view class="searchView">
				<view class="time uni-flex">
					<!-- <view class="timeText">时间</view> -->
					<view class="search_nf">
						<picker :range="years" value="5" @change="yearChange">
							{{ years[yearsIndex] }} 年 <span class='r'></span>
						</picker>
					</view>
					<image class="shaixuanFont" src="../../static/icon/triangleFont.png"></image> 
				</view>
				<input class="searchProj" v-model="inputText" type="text" placeholder="请输入项目名称" @confirm="confirm" />
				<view class="searchFont" @click="goSearch"><image src="../../static/icon/search.png"></image> </view>
			</view>
		</view>
		<view class="swiperHead" v-if="provleading==true">
		  <view class="swiperItem" :class="{swpHeadActiv:currentTabIndex==index}" v-for="(tab,index) in tabList" :key="tab.id" :id="tab.id" @click="CurrentTab(index)">
			<text class="swipText"> {{tab.name}}</text> <text class="swiperLine"></text>
		  </view>
		</view>
		<view class="swiperHead" v-else>
		  <view class="swiperItem swpHeadActiv">
			<text class="swipText" @click="CurrentTab(0)">我关注的项目</text> <text class="swiperLine"></text>
		  </view>
		</view>
		<view class="cutLine"></view>
		<view class="uni-list" v-show="currentTabIndex==0">
			<view class="noData" v-if="noDataShow==true">
				<view class="imgBox"> <image class="noDataImg" style="width: 284px;height: 284px;" src="../../static/nodata.png"></image></view>
				<view class="smallText">{{noDataText}}</view>
				<view class="attentionBox" v-if="noSearch==true"> 
					<view class="attention" @click="lijiguanzhu">立即关注</view>
				</view>
			</view>
			<view class="uni-list-cell" v-else v-for="(item,index) in rows" :key="index"
			:data-projectId="item.projectId">
				<view class="uni-media-list">					
					<view class="uni-media-list-body">
						<view class="listContent" hover-class="uni-list-cell-hover" @tap="openinfo" :data-projectId="item.projectId">
							<view class="uni-media-list-text-top titleText">{{item.title}}</view>
							<view class="uni-flex uni-ellipsis">
							  <view class="infoText2">
								计划投资：{{item.planInvestment}}亿元
							  </view>
							  <view class="infoText2">
							  
							  完成进度:{{item.rate}}%</view>
							</view>
						</view>
						<view class="imgView uni-flex" v-if="item.photos.length!=0">
							<view class="imgBox" v-for="(imgItem,index) in item.photos" :key="index"> 
								<image :src="imgItem.fjdz" @click="previewImage(imgItem.fjdz)"></image>
							</view>
						</view>
						<view class="btomFont">
							<view class="btomFont_one" :class="[item.isMonitor==1?'btomActive':'']" @tap="goJk" :data-projectId="item.projectId" :data-isMonitor="item.isMonitor">
								<image class="jiankongFont"  v-if="item.isMonitor==1" src="../../static/icon/icon-2.png"></image>
								<image class="jiankongFont" v-else src="../../static/icon/icon.png"></image>
								<view >监控</view>
							</view>
							
							<view class="btomFont_one" :class="{'btomActive':rSelect.indexOf(index)==-1}" @click="focusOn(item,index)" :key="index" :data-projectId="item.projectId" :data-isCare="item.isCare">
								<view class="jiankongFont jiankImg"></view>
								<view>关注</view>
							</view>
							<view class="btomFont_one"  :class="[item.bw!=''&&item.bw!=null ?'btomActive':'']" @click="viewMap" :data-projectId="item.projectId" :data-bw="item.bw" :data-dj="item.dj">
								<image class="jiankongFont" v-if="item.bw!=''&&item.bw!=null" src="../../static/icon/icon-5.png"></image>
								<image class="jiankongFont" v-else src="../../static/icon/icon-4.png"></image>
								<view>地图</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="uni-list" v-show="currentTabIndex==1">
			<view class="noData" v-if="noLinkData==true">
				<view class="imgBox"> <image class="noDataImg" style="width: 284px;height: 284px;" src="../../static/nodata.png"></image></view>
				<view class="smallText">您还没有联系的项目哦~</view>
				<!-- <view class="attentionBox"> 
					<view class="attention" @click="lijiguanzhu">立即关注</view>
				</view> -->
			</view>
			<view class="uni-list-cell" v-for="(item,index) in news" :key="index"  
			:data-newsid="item.newsid">
				<view class="uni-media-list">					
					<view class="uni-media-list-body">
						<view class="listContent" hover-class="uni-list-cell-hover" @tap="openinfo" :data-projectId="item.projectId">
							<view class="uni-media-list-text-top titleText">{{item.title}}</view>
							<view class="uni-flex uni-ellipsis">
							  <view class="infoText2">
								计划投资：{{item.planInvestment}}亿元
							  </view>
							  <view class="infoText2">{{item.rate}}%</view>
							</view>
						</view>
						<view class="imgView uni-flex" v-if="item.photos.length!=0">
							<view class="imgBox" v-for="(imgItem,index) in item.photos" :key="index"> 
								<image :src="imgItem.src" @click="previewImage(index)"></image>
							</view>
						</view>
						<view class="btomFont">
							<view class="btomFont_one":class="[item.isMonitor==1?'btomActive':'']" @click="goJk" :data-projectId="item.projectId" :data-isMonitor="item.isMonitor">
								<image class="jiankongFont"  v-if="item.isMonitor==1" src="../../static/icon/icon-2.png"></image>
								<image class="jiankongFont" v-else src="../../static/icon/icon.png"></image>
								<view :class="{btomActive:item.isMonitor==1}">监控</view>
							</view>
							<view class="btomFont_one" @click="focusOn" :data-projectId="item.projectId" :data-isCare="item.isCare">
								<image class="jiankongFont"  v-if="item.isCare==1" src="../../static/icon/icon-3.png"></image>
								<image class="jiankongFont" v-else src="../../static/icon/icon-1.png"></image>
								<view :class="{btomActive:item.isCare==1}">关注</view>
							</view>
							<view class="btomFont_one" @click="viewMap" :data-newsid="item.newsid">
								<image class="jiankongFont"  v-if="item.bw!=null" src="../../static/icon/icon-5.png"></image>
								<image class="jiankongFont" v-else src="../../static/icon/icon-4.png"></image>
								<view :class="{btomActive:item.bw!=null}">地图</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
			
			
	</view>
</template>

<script>
	export default {
		data() {
			return {
				provleading:false,
				tabList: [{
				  id: "tab01",
				  name: '我关注的项目',
				  statistical: '1'
				}, {
				  id: "tab02",
				  name: '我联系的项目',
				  statistical: '2'
				}],
				news : [],
				years:[],
				yearsIndex:0,
				imgArr:[
					{src:"../../static/proj_three.png"},
					{src:"../../static/proj_two.png"},
					{src:"../../static/proj_one.png"}
				],
				total:0,
				jiankstate:1,
				guanzhustate:0,
				mapstate:1,
				currentTabIndex:0,
				rows:[],
				rSelect: [],
				noDataShow:true,
				noSearch:true,
				noLinkData:false,
				backData:[],
				buildPropertyId:"",
				industryId:"",
				proaddId:"",
				inputText:'',
				noDataText:"您还没有关注的项目哦~"
			}
		},
		onShow() {
			let roleType =uni.getStorageSync("roleType");
			console.log(roleType);
			if(roleType==1||roleType==9){
				this.provleading=true;
				this.CurrentTab(0);
				this.concatProj();
			}else{
				this.provleading=false;
				this.CurrentTab(0);
				this.careProj();
			}
		},
		onLoad:function(){
			this.getYears();
			//当前年份
			this.$http.get("/sys/v1/currentYear.do",{
				
			}).then(res=>{
				//console.log(res)
				this.year= res.data;
				let yearsIndex=0;
				yearsIndex = this.years.indexOf(this.year);
				this.yearsIndex = yearsIndex;
			})
			
			//分角色分权限
			
			// let roleType =uni.getStorageSync("roleType");
			// console.log(roleType);
			// if(roleType==1||roleType==9){
			// 	this.provleading=true;
			// 	this.concatProj();
			// }else{
			// 	//this.provleading=false;
			// 	this.CurrentTab(0);
			// 	this.careProj();
			// }	
		},
		methods: {
			//年份取后台
			getYears(){
				this.$http.get("/sys/v1/dict.do?code=year",{
					
				}).then(res=>{
					console.log(res);
					let years = res.data;
					for(var i=0;i<years.length;i++){
						let yearName = years[i].name;
						this.years.push(yearName);
					}
					console.log(this.years)
				})
			},
			upData: function(backData)
			     {
				  this.buildPropertyId = backData.jieduanId;
				  this.industryId = backData.guishuId;
				  this.proaddId = backData.lingyuId;
				   this.careProj(backData);
				    this.concatProj(backData);
			     },
			concatProj(){
				let years = this.years;
				let yearsIndex = this.yearsIndex;
				let year = years[yearsIndex];
				let projectName = this.inputText;
				//我联系的项目
				this.$http.get("/project/v1/linkLead.do",{
					  params:{year:year,
					  projectName:projectName,
					  buildPropertyId:this.buildPropertyId,
					  proaddId:this.proaddId,
					  industryId:this.industryId,
					  pageNo:this.pageNo}
					  }).then(data=> {
						  console.log(data);
						  if(data.data.rows.length>0) {
							   this.news = data.data.rows;
							   console.log(this.news);
							  this.news = this.news.map((item) => {
								  return {
								   projectId: item.projectId,
								   title: item.projectName,
								   isCare:item.isCare,
								   isMonitor:item.isMonitor,
								   planInvestment:item.planInvestment,
								   rate:item.rate,
								   bw:item.bw,
								   dj:item.dj,
								   photos:item.photos
								  };
								});	
						  }else{
							  this.noLinkData = true
						  }
					}).catch(e=>{
						console.log("请求错误",e)
					});
			},
			careProj(){
				
				let years = this.years;
				let yearsIndex = this.yearsIndex;
				let year = years[yearsIndex];
				let projectName =this.inputText;
				//我关注的项目
				this.$http.get("/project/v1/carelist.do",{
					params:{
					year:year,
					projectName:projectName,
					buildPropertyId:this.buildPropertyId,
					proaddId:this.proaddId,
					industryId:this.industryId,
					pageNo:this.pageNo}
				}).then(data=>{
					console.log(data);
					this.rows = data.data.rows;
					console.log(this.rSelect);
					if(this.rows.length==0&&this.projectName==""){
						this.noDataShow = true;
						this.noDataText="您还没有关注的项目哦~"
						this.noSearch = true;
					}else if(this.rows.length==0&&this.projectName!=""){
						this.noDataShow = true;
						this.noSearch = false;
						this.noDataText="没有数据~"
					}else{
						this.noDataShow = false
						this.rows = this.rows.map((item) => {
							  return {
							   projectId: item.projectId,
							   title: item.projectName,
							   isCare:item.isCare,
							   isMonitor:item.isMonitor,
							   planInvestment:item.planInvestment,
							   rate:item.rate,
							   pxh:item.pxh,
							   bw:item.bw,
							   dj:item.dj,
							   photos:item.photos
							  };
							});	
							var arrData = []
							for(var i = 0;i < this.news.length;i++) {
							   if(this.news[i].isCare == 1){
								   arrData.push(i)
							   }
							}
							this.rSelect = arrData
							console.log(this.rSelect);
					}
				})
			},
			CurrentTab(index){
				this.currentTabIndex = index;
				if(index==0){
					this.careProj()
				}else if(index==1){
					this.concatProj()
				}
			},
			yearChange:function(e){
				this.yearsIndex = e.detail.value;
			},
			goSearch(){//搜索查询
				let projectName= this.inputText;
				let options={projectName:projectName};
				this.concatProj(options);
				this.careProj(options);
			},
			confirm(){
				this.goSearch();
				uni.hideKeyboard();
			},
				//顶部导航筛选跳转
				goShaixuan(){
					uni.navigateTo({
						url:"../xmjz/shaixuan"
					})
				},
				openinfo(e) {
					var newsid = e.currentTarget.dataset.projectId;
					console.log(newsid)
					uni.navigateTo({
					    url: '/pages/xmjz/info?projectId=' + newsid
					});
				},
				
				goJk(e){
					var projectId = e.currentTarget.dataset.projectId
					var monitor=e.currentTarget.dataset.isMonitor;
					if(monitor>0){
						uni.navigateTo({
							url:"/pages/xmjz/jklist?projectId="+projectId
						})
					}
				},
				// 点心心关注
				focusOn(data,index){
					let projectId = data.projectId;
					let isCare = data.isCare;
					console.log(projectId+" "+isCare)
					this.$http.get("/project/v1/deleteCare.do?projectId="+projectId,{
						
					}).then(res=>{
						console.log(res);
						if(res.data.code==0){
							uni.showToast({
								title:"您已取消关注！",
								icon:"none"
							})
							if(this.news[index].projectId==projectId){
								console.log(this.isCare[index])
								this.news[index].isCare=0
							}
						}
					});
					if (this.rSelect.indexOf(index) == -1) {
					    console.log(index)//打印下标
					    this.rSelect.push(index);//选中添加到数组里
					} else {
					    this.rSelect.splice(this.rSelect.indexOf(index), 1); //取消
					}
				},
				//查看地图
				viewMap(index){
					uni.navigateTo({
						url:"../map/map"
					})
				},
				previewImage(index){
					let photoList = this.imgArr.map(item=>{
						return item.src
					});
					uni.previewImage({
						current:index,
						urls:photoList,
						loop:true
					})
				},
			lijiguanzhu(){
				uni.navigateTo({
					url:"../xmjz/index"
				})
			}
		}
	}
</script>

<style>
	@import "uni.css";
	@import "project.css";
	
</style>
